<template>
	<view class="body" >
		
		<view class="header"  @click="navTo('/pages/Mine/personDetail')" >
			<view class="header-left" >
				<view>
					<image :src=" infoDetail.head_portrait ? infoDetail.head_portrait : require('static/missing-face.png')" ></image>
				</view>
				<view class="header-left-tit" >
					<view style="color: #333333;" >{{infoDetail.nick_name}}</view>
					<view style="color: #666;" >{{infoDetail.phone}}</view>
				</view>
			</view>
			<view>
				<u-icon  name="arrow-right" ></u-icon>
			</view>
		</view>
		
		<view class="cover-container">
			<!-- 订单 -->
			<view class="order-content">
				<view class="order-head">
					<view>我的订单</view>
					<view @click="navTo('/pages/Order/order?state=0')" class="order-more">查看全部<text class="yticon icon-you"></text></view>
				</view>
				<view class="order-section">
					<view class="order-item" @click="navTo('/pages/Order/order?state=0')"  hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-pingjia" style="color: #fa436a;" ></text>
						<text>全部订单</text>
					</view>
					<view class="order-item" @click="navTo('/pages/Order/order?state=1')"  hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-daifukuan" style="color: #fa436a;" ></text>
						<text>待付款</text>
					</view>
					<view class="order-item" @click="navTo('/pages/Order/order?state=2')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="yticon icon-shouhoutuikuan" style="color: #fa436a;" ></text>
						<text>已支付</text>
					</view>
					<view class="order-item" @click="navTo('/pages/Order/order?state=3')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="yticon icon-yishouhuo" style="color: #fa436a;" ></text>
						<text>已完成</text>
					</view>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view class="history-section icon">
			
				<list-cell icon="icon-shoucang" title="店铺入驻" iconColor="#fa436a" :tips="storeMsg.message" @eventClick="storeTo(storeMsg.type,storeMsg.reason)"></list-cell>
				<!-- <list-cell icon="icon-shoucang" title="我的店铺" iconColor="#fa436a" @eventClick="navTo('/pages/Store/storeDetail')"></list-cell> -->
				<list-cell icon="icon-iconfontweixin" title="我的钱包" iconColor="#fa436a" @eventClick="navTo('/pages/Mine/wallet/walletIndex')"></list-cell>
				<list-cell icon="icon-huifu" title="邀请商家" iconColor="#fa436a" @eventClick="navTo('/pages/Mine/invitation/inviteBusinessmen')"></list-cell>
				<list-cell icon="icon-huifu" title="邀请用户" iconColor="#fa436a" @eventClick="navTo('/pages/Mine/invitation/inviteUsers')"></list-cell>
				<list-cell icon="icon-tuandui"  title="我的团队" iconColor="#fa436a" @eventClick="navTo('/pages/Mine/team')"></list-cell>
				<!-- <list-cell icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></list-cell> -->
				<!-- <list-cell icon="icon-shezhi1" title="设置" iconColor="#fa436a" border="" @eventClick="navTo('/pages/Member/set/set')"></list-cell> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	import listCell from '@/components/mix-list-cell.vue';
	
	export default{
		components: {
			listCell
		},
		data(){
			return{
				infoDetail: {}   ,//用户信息
				storeMsg:{type:0,message:''},
			}
		},
		onLoad() {
		
		},
		onShow() {
			if(!(uni.getStorageSync('token') && uni.getStorageSync('refresh_token'))){
				uni.reLaunch({
					url: './login/login'
				})
			}else{
				this.getInfo()
				this.getStoreStatus()
			}
		},
		methods:{
			
			getInfo(){
				
				this.$https.Mine.getUseInfo().then(req => {
					console.log('req',req)
					this.infoDetail = req
				})
			},
			getStoreStatus(){
				this.$https.Mine.getStoreStatus().then(req => {
					this.storeMsg = req
				})
			},
			storeTo(type,reason){
				uni.navigateTo({
					url:'/pages/Store/storeHouse'
				})
			},
			navTo(url){
				
				uni.navigateTo({
					url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped >
	page,.body{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	
	.header{
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		padding: 50rpx 30rpx;
		
		background-color: #FFFFFF;
		text-align: center;
		
		.header-left{
			display: flex;
			align-items: center;
		}
		
		.header-left-tit{
			text-align: left;
		}
		
		
		image{
			
			margin-right: 28rpx;
			
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}
		
	}
	
	.cover-container{
		
		padding: 8upx 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
	}
	
	.order-content{
		border-radius: 10upx;
		background: #fff;
		margin-top: 20upx;
		.order-head{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20upx;
			border-bottom: 2upx solid #eee;
			font-size: 28upx;
			
			.order-more{
				font-size: 24upx;
				color: #999;
				text{
					font-size: 24upx;
				}
			}
		}
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* @extend %section; */
		padding: 20upx 0;
		
		.order-item{
			position: relative;
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			color: #303133;
		}
		image{
			width: 48upx;
			height: 48upx;
			margin-bottom: 10upx;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 10upx;
			color: $uni-color-primary;
		}
		
		.iconfont{
			
			margin-bottom: 10upx;
			font-size: 48upx;
			color: $uni-color-primary;
		}
		
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			justify-content: space-between;
			align-items: center;
			font-size: $uni-font-size-base;
			color: #303133;
			line-height: 40upx;
			margin: 0 30upx;
			view{
				display:flex;
				justify-content: space-between;
				align-items: center;
			}
			.icon-lishijilu{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

</style>
